<template>
    <div class="installationPlanLIst" ref="IPlan">
        <cjcNav title="设置计划" @customRouter="customRouter">
            <div>
                <Dropdown trigger="click" class="dropWeek" @on-click="setWeek">
                    <span>
                        第{{zc}}周
                        <Icon type="arrow-down-b"></Icon>
                    </span>
                    <DropdownMenu slot="list" class="dropWeek-menu">
                        <DropdownItem v-for="(item, index) in $store.state.SchoolWeekList" :key="item.zc" :name="index">{{item.ZC}}周</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </div>
        </cjcNav>
        <headTime :time="time"/>
        <div class="conten-are" 
        :style="{padding: contentAreaPadding}" 
        v-if="$store.state.WeekPlan" ref="list" @touchstart="_touchStart" @touchmove="_touchMove" @touchend="_touchEnd">
            <list :key="item[0].PLAN_ID" :id="item[0].WEEK" :info="item" :zc="zc" v-for="item in $store.state.WeekPlan.PLAN_LIST"/>
        </div>
        <div @click="copyPlan" v-if="$store.state.WeekPlan.PLAN_LIST[0][2].RULE_STATUS !== 6" class="copyplan">一键复制成本学期计划</div>
        <Spin size="large" style="position: fixed" fix v-if="loading"></Spin>
    </div>
</template>

<script>
export default {
    components: {
        cjcNav: () => import('@/components/common/Nav.vue'),
        headTime: () => import('@/components/common/headTime.vue'),
        list: () => import('@/components/instationPlan/list.vue'),
    },
    data() {
        return {
            loading: false,
            changWeekStatus: this.$store.state.changWeekStatus,
            zc: 1,
            starY: 0,
            moveY: 0,
            endY: 0,
            listY: 0
        }
    },
    computed: {
        time() {
            try {
                let schoolTime = this.$store.state.WeekPlan.SCHOOL_TIME
                let zc = `第${schoolTime.ZC}周`
                let start = schoolTime.START.split('-')
                start.shift()
                let end = schoolTime.END.split('-')
                end.shift()
                return `${zc} ${start.join('-')} ~ ${end.join('-')}`
            } catch (error) {
                return
            }
        },
        contentAreaPadding() {
            if (this.$store.state.WeekPlan.PLAN_LIST[0][2].RULE_STATUS === 6) {
                return '0 15px'
            } else {
                return '0 15px 50px'
            }
        }
    },
    methods: {
        customRouter() {
            // 自定义路由
            this.$router.push({
                name: 'punchCard'
            })
        },
        setWeek(item) {
            this.setWeekPlan({
                userID: this.$store.state.userInfo.USER_ID,
                XN: this.$store.state.SchoolWeekList[item].XN,
                XQ: this.$store.state.SchoolWeekList[item].XQ,
                ZC: this.$store.state.SchoolWeekList[item].ZC
            })
        },
        _touchStart(e) {
            this.starY = e.changedTouches[0].clientY
            this.$refs.list.style.transition = 'all .1s linear'
        },
        // 获取手指移动距离来显示被隐藏的项目，并是框架移动
        _touchMove(e) {
            this.moveY = e.changedTouches[0].clientY - this.starY
            // if (this.moveY > 30) {
            //     // 滑动距离超过一百改变状态
            //     this.swipeStaus = true
            // }
            if (this.moveY < 50 && this.moveY > -50) {
                this.$refs.list.style.transform = 'translate3d(0, ' + this.moveY + 'px, 0)'
            }
        },
        _touchEnd(e) {
            this.endY = e.changedTouches[0].clientY
            this.$refs.list.style.transition = 'all .3s linear'
            this.$refs.list.style.transform = 'translate3d(0, 0, 0)'
        },
        async setWeekPlan(SchoolWeek) {
            this.zc = SchoolWeek.ZC
            let WeekPlan = await this.$store.dispatch('getWeekPlan', {
                userID: this.$store.state.userInfo.USER_ID,
                XN: SchoolWeek.XN,
                XQ: SchoolWeek.XQ,
                ZC: SchoolWeek.ZC,
                flag: 0
            })
            this.$store.commit('SET_WeekPlan', WeekPlan.result)
        },
        async setSchoolWeek() {
            let SchoolWeek = await this.$store.dispatch('getSchoolWeek')
            this.$store.commit('SET_SchoolWeek', SchoolWeek.result)
        },
        /**
         * 设置教学周
        */
        async setSchoolWeekList() {
            let SchoolWeekList = await this.$store.dispatch('getSchoolWeekList')
            this.$store.commit('SET_SchoolWeekList', SchoolWeekList.result)
        },
        nextWeek() {
            this.changWeekStatus = true
            this.loading = true
            let SchoolWeek = this.$store.state.SchoolWeek
            let XN = SchoolWeek.XN
            let XQ = SchoolWeek.XQ
            let ZC = Number(SchoolWeek.ZC) + 1
            this.setWeekPlan({
                XN,
                XQ,
                ZC
            }).then(res => {
                this.loading = false
            })
        },
        lastWeek() {
            this.changWeekStatus = false
            this.loading = true
            let SchoolWeek = this.$store.state.SchoolWeek
            let XN = SchoolWeek.XN
            let XQ = SchoolWeek.XQ
            let ZC = SchoolWeek.ZC
            this.setWeekPlan({
                XN,
                XQ,
                ZC
            }).then(res => {
                this.loading = false
            })
        },
        // 一键复制本学期计划
        copyPlan() {
            const Vm = this
            this.$Modal.confirm({
                title: '确认操作？',
                content: `是否将第${this.$store.state.WeekPlan.SCHOOL_TIME.ZC}周的计划复制为本学期所有剩余周的默认计划？`,
                onOk() {
                    Vm.$store.dispatch('setRestOfWeekPlan', {
                        'user_id': Vm.$store.state.userInfo.USER_ID,
                        'zc': Vm.$store.state.WeekPlan.SCHOOL_TIME.ZC,
                        'xq': Vm.$store.state.WeekPlan.SCHOOL_TIME.XQ,
                        'xn': Vm.$store.state.WeekPlan.SCHOOL_TIME.XN,
                    }).then(res => {
                        if (res.data.status === 0) {
                            Vm.$Message.success({
                                content: res.data.msg
                            })
                        } else {
                            Vm.$Message.error({
                                content: res.data.msg
                            })
                        }
                    })
                }
            })
        }
    },
    created() {
        const Vm = this
        async function step() {
            await Vm.setSchoolWeek() // 设置周次
            let zc
            if (Vm.$route.params.zc) {
                Vm.changWeekStatus = true
                zc = Number(Vm.$route.params.zc)
            } else {
                zc = Number(Vm.$store.state.SchoolWeek.ZC)
            }

            let SchoolWeek
            if (Vm.changWeekStatus === false) {
                SchoolWeek = Vm.$store.state.SchoolWeek
            } else {
                SchoolWeek = {
                    XN: Vm.$store.state.SchoolWeek.XN,
                    XQ: Vm.$store.state.SchoolWeek.XQ,
                    ZC: zc
                }
            }
            Vm.setSchoolWeekList()
            await Vm.setWeekPlan(SchoolWeek)

            Vm.loading = false
        }
        Vm.loading = true
        this.$store.dispatch('isUserInfo').then(res => {
            step()
            setTimeout(() => {
                console.log(Vm.$refs.IPlan.scrollTop)
                Vm.$refs.IPlan.scrollTop = 200
                Vm.$refs.IPlan.addEventListener('scroll', function(e) {
                    Vm.$refs.IPlan.offsetTop
                })
            }, 0)
        })
    },
    destroyed() {
        this.$store.commit('SET_changWeekStatus', this.changWeekStatus)
    }
}
</script>

<style lang="less">
    .installationPlanLIst{
        .nav{
            box-shadow: none;
        }
        .dropWeek{
            margin-right: 20px; 
            color: rgb(45, 140, 240);
        }
        .dropWeek-menu{
            height: 300px;
            overflow-x: hidden;
            overflow-y: scroll;
            text-align: center;
        }
        .switch{
            display: inline-block;
            color: rgb(45, 140, 240);
            font-size: 15px;
            margin-right: 15px;
        }
        .conten-are{
            position: relative;
            height: 80vh;
            // padding: 0 15px 50px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .copyplan{
            position: fixed;
            width: 100%;
            bottom: 0;
            padding: 10px;
            // margin: 0 15px;
            background-color: #fff;
            text-align: center;
            color: #2d8cf0;
            text-decoration: underline;
        }
    }
</style>
